<template>
  <div>
    <basic-container> 
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容运营</el-breadcrumb-item> 
        <el-breadcrumb-item>马甲评论</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud ref="crud"  @selection-change="selectionChange" :data="data" v-model="form" :option="option" :page.sync="page" @on-load="getList"  @search-change="searchChange"  @refresh-change="refreshChange" @search-reset="from = {}"  @row-update="rowUpdate" >
        <!-- 自定义按钮 -->
        <template slot-scope="scope" slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            plain
            @click.stop="handleAdd()"
            >创建评论内容</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-plus"
            size="small"
            plain
            @click.stop="deleteCheck()"
            >删除</el-button
          >
        </template>
        <!-- 自定义操作栏 -->
        <template slot-scope="scope" slot="menu">
          <!-- <el-button
            icon="el-icon-edit"
            type="text"
            size="small"
            @click.stop="handleEdit(scope)"
            >编辑</el-button
          > -->
          <el-button
            icon="el-icon-delete"
            type="text"
            size="small"
            @click.stop="handleDel(scope)"
            >删除</el-button
          >
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { appCommentTemplate as baseURL } from "@/api/cat/baseUrls"; 
export default {
  data() {
    return {
      page: {
        total: 0,
        pageSize: 10,
      },
      type: true,
      data: [],
      params: {},
      form: {},
      // 默认查询条件
      defalut: {
        'orderByList': 'create_time&DESC',
      },
      option: {
        addBtn: false,
        editBtn: true,
        viewBtn: false,
        delBtn: false,
        excelBtn: false,
        selection: true,
        column: [
          {
            label: "评论内容",
            prop: "content",
            type: "input",
            search: true,
            multiple: true,
          },
          {
            label: "最后操作信息",
            prop: "update_time",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
          },
        ],
      },
    };
  },
  methods: {
    
    /**勾选所有 */
    selectionChange (row) {
      this.checks = row
    },
    /**获取列表 */
    async getList () {
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        `${baseURL.pageAndParam}`,
        { ...this.params, ...this.defalut },
        this.page,
        "POST"
      );
      
      this.page = response.page;
      this.data = response.data;
      this.loading = false;
    }, 
    //跳转修改页面
    handleEdit(scope) {
      this.$router.push("/commenttemplate/edit");
    },
     
    /**修改 */
    async rowUpdate (row, index, done, loading) {
      let userInfo = this.$store.state.user.userInfo;
      row.update_admin_id = userInfo.id ? userInfo.id : null
      row.update_admin_name = userInfo.username
      let data = await common(`${baseURL.update}`, row, null, "POST");
      if (data == null) {
        return 
      }
      this.getList();
      done();
    },
    //删除某个
    handleDel(scope) {
        this.del([scope.row.id]);
    },  
    //跳转到添加页面
    handleAdd() {
      this.$router.push("/commenttemplate/add");
      // this.$refs.crud.rowAdd();
    },
    //全选删除
    deleteCheck() {
      let arr = this.checks.map(item => item.id);
      this.del(arr);
    },

    del(ids){
      this.$confirm(
        "确定要删除吗？删除后曾经下发的评论也会一并被删除掉哦！",
        "提示",
        {
          type: "warning",
        }
      )
      .then(async () => {
        let data = await common(`${baseURL.deleteAll}`, ids, null, "POST");
        if (data == null) {
          return
        }
        this.refreshChange();
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    
    /**刷新 */
    refreshChange () {
      this.getList();
      
    }, 
    /**搜索 */
    searchChange (params, done) {
      params.content = `${params.content ? '%'+params.content+'%' : ""}`
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
  },
};
</script>